{% extends 'base.html' %}
{% load static %}

{% block css %}
    <style>
    img {
        width: 100px;
    }
    </style>
{% endblock %}

{% block content %}
    <h3 class="center">修改头像</h3>
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <p>
            原头像:
            <img src="{% url 'media' request.user.avatar %}" alt="">
        </p>
        <p>
            <label for="myfile">新头像
                <img src="{% static 'img/default.png' %}" alt="" class="avatar">
            </label>
            <input type="file" id="myfile" name="avatar" style="display: none;">
        </p>
        <input type="submit" class="btn btn-info">
    </form>
{% endblock %}

{% block js %}
    <script>
        $('myfile').change(function () {
            let myFileReadObj = new FileReader();

            let fileObj = $(this)[0].files[0];

            myFileReadObj.readAsDataURL(fileObj);
            myFileReadObj.onload = function () {
                $('myimg').attr('src', myFileReadObj.result);
            }
        });
    </script>
{% endblock %}